<template>
  <el-row class="homesolution_total">
    <div class="homesolution">
      <div class="homesolution-about">
        <div class="homesolution-about_left">
          <h2 class="homesolution-about_red">
            立体仓库解决方案
          </h2>
        </div>
        <div class="homesolution-about_right">
          <button class="homesolution-about_button">
            <a href="" class="homesolution-about_a">更多<span>></span></a>
          </button>
        </div>
      </div>
      <div class="homesolution-main">
        <div class="homesolution-main_project">
          <div class="main-project_list" v-for="(item,index) in items" :key="index">
            <div class="pic">
              <a class="pic-a" href=""><img class="pic-img" :src="item.src" alt=""></a>
            </div>
            <div class="note">
              <h3><a class="note-title" href="">{{item.text}}</a></h3>
              <p class="note-p">医药仓储物流系统领域中安全性与合规性须严格遵循，华晟智能依据GMP、GSP等政府法规及企业，医药仓储物流系统领域中安全性与合规性须严格遵循，华晟智能依据GMP、GSP等政府法规及企业医药仓储物流系统领域中安全性与合规性须严格遵循，华晟智能依据GMP、GSP等政府法规及企业</p>
              <a class="note-a" href="">{{item.more}}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-row>
</template>
<script>
    export default {
        name: "Homesolution",
        data() {
            return {
                items:[
                    {
                        src:'http://www.huashine.net/uploads/220407/1-22040G41913340.jpg',
                        text:'新能源行业解决方案',
                        about:'医药仓储物流系统领域中安全性与合规性须严格遵循，华晟智能依据GMP、GSP等政府法规及企业，医药仓储物流系统领域中安全性与合规性须严格遵循，华晟智能依据GMP、GSP等政府法规及企业医药仓储物流系统领域中安全性与合规性须严格遵循，华晟智能依据GMP、GSP等政府法规及企业',
                        more:'了解更多',
                    },
                    {
                        src:'http://www.huashine.net/uploads/220407/1-22040G41913340.jpg',
                        text:'新能源行业解决方案',
                        about:'产品优势 降低人力投入，易于管理； 减少人工作业带来的差错率，提高产品质量的稳定性',
                        more:'了解更多',
                    },
                    {
                        src:'http://www.huashine.net/uploads/220407/1-22040G41913340.jpg',
                        text:'新能源行业解决方案',
                        about:'产品优势 降低人力投入，易于管理； 减少人工作业带来的差错率，提高产品质量的稳定性',
                        more:'了解更多',
                    },
                ],
            }
        },
    }
</script>
<style scoped>
  /* 仓库中的解决方案上部分 */
  .homesolution_total{
    width: 100%;
    height: 100%;
    /* background-color: yellowgreen; */
    /* width:200px;
    height:200px; */
    /* background-color: #000;filter:Alpha(opacity=50); */
    /* background:rgba(109, 109, 109, 0.01); */
    background-image: url(https://www.huashine.net/images/solution_bg.jpg) ;
    /* background-color: rgba(105, 101, 101, 0.32); */
    background-size: cover;
    /* background-color: rgba(0,0,0,0.5)!important; */
    /* background-color: #000;
    filter:Alpha(opacity=50); */
    /* opacity:0.7; */

  }
  .homesolution{
    width: 80%;
    height: 100%;
    margin: 0 auto;
    /* opacity:1 !important; */
    /* background-image: url(); */
    /* margin-top: 5%; */
    margin-top: 4%;
    margin-bottom: 10%;
    /* position: relative; */
  }

  .homesolution-about{
    display: flex;
    justify-content: space-between;
  }
  .homesolution-about_left{
    width: 250px;
    height: 50px;
    justify-content: center;
    align-items: center;
    /* background-color: red; */
    /* line-height:50px; */
  }
  .homesolution-about_red::before {
    content: '';
    /* display: inline-block; */
    width: 4px;
    height: 24px;
    background-color: rgb(0, 65, 147);
    float: left;
    /* display: flex; */
    /* margin-left: 14px; */
    /* margin-right: 48px; */
    margin-right: 10%;
    /* justify-content: center;
    align-content: center;
    text-align: center; */
    /* margin-top:3%; */
  }
  .homesolution-about_red > h2{
    /* margin-right: -50px; */
    /* margin-top: 10px; */
    /* display: flex; */
    float: left;
    /* font-size: 100px !important; */

  }
  .homesolution-about_right {
    display: flex;
    /* float:left; */
    /* justify-content: right; */
    align-items: flex-end;
    /* border: 1px solid; */
  }
  .homesolution-about_right > button{
    width: 100px;
    height: 35px;
    /* line-height: 2.5; */
    border-radius: 40px;
    border: 0px;
    background-color: rgb(0, 65, 147);
    border: 1px solid #fff;
  }
  .homesolution-about_right > button > a{
    color: #fff;
  }
  .homesolution-about_right > button:hover{
    background-color: #fff;
    border: 1px solid #8f8e8e;
  }
  .homesolution-about_right > button:hover .homesolution-about_a{
    color: #8f8e8e;
  }

  .homesolution-about_right > button > a > span{
    margin-left: 6%;
  }
  /* 仓库下面的的解决方案 */
  .homesolution-main{
    width: 100%;
    height: 100%;
    margin-top: 3%;
    /* background-color: rgb(115, 115, 117); */
  }
  .homesolution-main_project{
    width: 100%;
    height: 100%;
    display: flex;
    /* flex: ; */
    flex-wrap: wrap;
    justify-content: space-between;

  }
  .main-project_list{
    width: 33%;
    display: flex;
    /* border: 1px solid red; */
  }
  .main-project_list:hover .pic-img{
    transform: scale(1.2);
  }
  .main-project_list:hover .note-title{
    color: rgb(0, 65, 147);
  }
  .main-project_list:hover .note-a{
    color: rgb(0, 65, 147);
  }
  .pic{
    width: 50%;
    height: 100%;
    /*border: 1px solid red;*/
    overflow: hidden;
    transition: transform .8s;
  }
  .pic-img{
    width: 100%;
    height: 100%;
    transition: transform .8s;

  }
  .note{
    width: 50%;
    height: 100%;
    /* border: 1px solid yellow; */
    background-color: #fff;
  }
  .note > h3{
    width: 90%;
    height: 10%;
    /* border:1px solid  #db0b1b; */
    margin: 0 auto;
    /* text-align: center; */
    font-size: 14px;
    margin-top: 14%;
  }
  .note > h3::after{
    content: '';
    display: block;
    width: 15%;
    height: 2px;
    background-color: rgb(0, 65, 147);
    margin-top: 5%;
  }
  .note-title{
    /* text-align: center; */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    color: black;
  }
  .note-p{
    width: 90%;
    /* height: 40%; */
    color: #807e7e;
    font-size: 12px;
    margin: 0 auto;
    margin-top: 20%;
    line-height: 20px;
    /* border:1px solid  green; */
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }
  .note-a{
    width: 90%;
    margin: 0 auto;
    height: 10%;
    display: block;
    /* border:1px solid  rgb(10, 216, 134); */
    margin-top: 30%;
    font-size: 12px;
    color: black;
  }
  @media screen and (max-width: 1200px){
    .main-project_list{
      width: 48%;
      display: flex;
      /* border: 1px solid red; */
    }
    .main-project_list:nth-child(3){
      margin-top: 4%;
    }
  }
  @media screen and (max-width: 768px){
    .main-project_list{
      width: 100%;
      /* display: flex; */
      /* border: 1px solid red; */
    }
    .homesolution-about{
      align-items: flex-end;
    }
    .main-project_list:nth-child(2){
      margin-top: 4%;
    }
    .main-project_list:nth-child(3){
      margin-top: 4%;
    }
    .homesolution-about_red::before{
      margin-right: 12px;
      font-size: 12px;
      /* width: 100px;
      height: 100px;
      border: 1px solid yellow; */
      /* display: block; */
    }

    .homesolution-about_right{
      width: 70px;
      height: 30px;
      /* align-content: center; */
      /* margin-top: 8%; */
    }
  }

</style>
